<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>네이버::대화형 서비스</title>
<link href="assets/css/sample.css" type="text/css" rel="stylesheet">
</head>
<body>
	<header>
		<section id="header_nav">
			<h1 id="logo">
				<a href="#"><img src="assets/resource/img/logo2.png"></a>
			</h1>
			<ul id="category_items">
				<li><a onclick="oRolling.moveTo(0); return false;">item01</a></li>
				<li><a onclick="oRolling.moveTo(1); return false;">item02</a></li>
				<li><a onclick="oRolling.moveTo(2); return false;">item03</a></li>
				<li><a onclick="oRolling.moveTo(3); return false;">item04</a></li>
				<li><a onclick="oRolling.moveTo(4); return false;">item05</a></li>
				<li><a onclick="oRolling.moveTo(5); return false;">item06</a></li>
				<li><a onclick="oRolling.moveTo(6); return false;">item07</a></li>
			</ul>
		</section>

		<section id="search">search</section>
	</header>

	<section id="rolling">
		<ul>
			<li><hr>
			<h5>item01</h5><hr>
				<table style="width: 100%; height: 100%">
					<tr style="width: 100%; height: 30%">
						<td  id="se_01" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C01_S001</button></td>
						<td  id="se_02" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C01_S002</button></td>
						<td id="se_03" onclick="myFunction(id)"><button  style="width: 100%; height: 100%">C01_S003</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td id="fi_01" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C01_S004</button></td>
						<td id="fi_02" onclick="myFunction(id)"><button   style="width: 100%; height: 100%">C01_S005</button></td>
						<td id="fi_03" onclick="myFunction(id)"><button   style="width: 100%; height: 100%">C01_S006</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td id="ne_01" onclick="myFunction(id)"><button   style="width: 100%; height: 100%">C01_S007</button></td>
						<td id="ne_02" onclick="myFunction(id)"><button   style="width: 100%; height: 100%">C01_S008</button></td>
						<td id="ne_03" onclick="myFunction(id)"><button  style="width: 100%; height: 100%">C01_S009</button></td>
					</tr>
				</table><hr>
			</li>
			<li><hr>
			<h5>item02</h5><hr>
				<table style="width: 100%; height: 100%">
					<tr style="width: 100%; height: 30%">
						<td id="et_06" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C02_S001</button></td>
						<td id="et_07" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C02_S002</button></td>
						<td id="et_05" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C02_S003</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td id="co_04" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C02_S004</button></td>
						<td id="co_05" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C02_S005</button></td>
						<td id="co_06" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C02_S006</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td id="we_03" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C02_S007</button></td>
						<td id="we_05" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C02_S008</button></td>
						<td id="we_04" onclick="myFunction(id)"><button style="width: 100%; height: 100%">C02_S009</button></td>
					</tr>
				</table><hr></li>
			<li><hr>
			<h5>item03</h5><hr>
				<table style="width: 100%; height: 100%">
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">C03_S001</button></td>
						<td><button style="width: 100%; height: 100%">C03_S002</button></td>
						<td><button style="width: 100%; height: 100%">C03_S003</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">C03_S004</button></td>
						<td><button style="width: 100%; height: 100%">C03_S005</button></td>
						<td><button style="width: 100%; height: 100%">C03_S006</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">C03_S007</button></td>
						<td><button style="width: 100%; height: 100%">C03_S008</button></td>
						<td><button style="width: 100%; height: 100%">C03_S009</button></td>
					</tr>
				</table><hr></li>
			<li><hr>
			<h5>item01</h5><hr>
				<table style="width: 100%; height: 100%">
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_001</button></td>
						<td><button style="width: 100%; height: 100%">service_002</button></td>
						<td><button style="width: 100%; height: 100%">service_003</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_004</button></td>
						<td><button style="width: 100%; height: 100%">service_005</button></td>
						<td><button style="width: 100%; height: 100%">service_006</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_007</button></td>
						<td><button style="width: 100%; height: 100%">service_008</button></td>
						<td><button style="width: 100%; height: 100%">service_009</button></td>
					</tr>
				</table><hr></li>
			<li><hr>
			<h5>item01</h5><hr>
				<table style="width: 100%; height: 100%">
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_001</button></td>
						<td><button style="width: 100%; height: 100%">service_002</button></td>
						<td><button style="width: 100%; height: 100%">service_003</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_004</button></td>
						<td><button style="width: 100%; height: 100%">service_005</button></td>
						<td><button style="width: 100%; height: 100%">service_006</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_007</button></td>
						<td><button style="width: 100%; height: 100%">service_008</button></td>
						<td><button style="width: 100%; height: 100%">service_009</button></td>
					</tr>
				</table><hr></li>
			<li><hr>
			<h5>item01</h5><hr>
				<table style="width: 100%; height: 100%">
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_001</button></td>
						<td><button style="width: 100%; height: 100%">service_002</button></td>
						<td><button style="width: 100%; height: 100%">service_003</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_004</button></td>
						<td><button style="width: 100%; height: 100%">service_005</button></td>
						<td><button style="width: 100%; height: 100%">service_006</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_007</button></td>
						<td><button style="width: 100%; height: 100%">service_008</button></td>
						<td><button style="width: 100%; height: 100%">service_009</button></td>
					</tr>
				</table><hr></li>
			<li><hr>
			<h5>item01</h5><hr>
				<table style="width: 100%; height: 100%">
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_001</button></td>
						<td><button style="width: 100%; height: 100%">service_002</button></td>
						<td><button style="width: 100%; height: 100%">service_003</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_004</button></td>
						<td><button style="width: 100%; height: 100%">service_005</button></td>
						<td><button style="width: 100%; height: 100%">service_006</button></td>
					</tr>
					<tr style="width: 100%; height: 30%">
						<td><button style="width: 100%; height: 100%">service_007</button></td>
						<td><button style="width: 100%; height: 100%">service_008</button></td>
						<td><button style="width: 100%; height: 100%">service_009</button></td>
					</tr>
				</table><hr></li>
		</ul>
	</section>
	<script type="text/javascript" src="assets/js/jindo.desktop.all.js"></script>
	<script type="text/javascript" src="assets/js/jindo_component.js"></script>
	<script src="assets/js/xmlhttp.js"></script>
	<script src="assets/js//xmlparser.js"></script>
	<script type="text/javascript">
		var oRolling = new jindo.Rolling(jindo.$('rolling'), {
			nDuration : 800, //롤링 시간은 400ms 으로 설정
			sDirection : 'horizontal', //가로형으로 설정
			fEffect : jindo.Effect.easeOut
		//
		});

		$Element("rolling").attach("mousewheel", normalEvent);
		$Element("rolling").attach("click", normalEvent);
		function normalEvent(e) {
			var mouse = e.mouse();
			if (mouse.delta == -1) {
				oRolling.moveBy(1);
				return false;
			}
			if (mouse.delta == 1) {
				oRolling.moveBy(-1);
				return false;
			}
			if(mouse.left){

				alert("your machine's local network IP is "+ location.hostname + location.location)
			}
		}
	</script>
	<script>
 	 	function myFunction(idValue){
 	 		
 	 		var date = new Date();
 	 		var tagDate = date.getTime();
 	 		var url = "http://localhost:8080/NaverUX/Servlet?service="+idValue+"&date="+tagDate;
 	 		
 	 		loadXMLDoc(url, function(){
 	 			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
 	 				//여기서 DB에서 가져와서 다시 뿌리는 것은 어떨지...
 	 				//xml을 이용해서 뿌린다 (default.xml 과 rank.xml 선택한다 조건:누적 클릭수 or score )
 	 				//xml 파싱을 통해서....
 	 			}
 	 		});
 	 	}
 	 </script>
</body>
</html>